<template>
    <div id="order">
        <van-sticky>
            <div class="top">
                <div class="left">
                    <div>
                        <span>订单数量：</span
                        ><span style="color: #f24b3a">3</span>
                    </div>
                    <div>
                        <span>签收数量：</span
                        ><span style="color: #f24b3a">3</span>
                    </div>
                    <div>
                        <span>激活数量：</span
                        ><span style="color: #FF8610">3</span>
                    </div>
                </div>
                <div class="right">
                    <span>筛选</span>
                    <img src="../../../assets/img/screen.svg" alt="" />
                </div>
            </div>
        </van-sticky>
        <!-- 列表 -->
        <van-pull-refresh
            v-if="!loadData"
            v-model="refreshing"
            @refresh="onRefresh"
            success-text="刷新成功"
        >
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="loadMore"
                class="list"
                :offset="100"
                :immediate-check="false"
                v-if="list.length !== 0"
            >

                <div
                    v-for="(item, index) in list"
                    :key="index"
                    class="list-item dis-flex flex-y-start"
                >
                    <div class="avatar">
                        <img
                            src="https://ts3.cn.mm.bing.net/th?id=OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
                            alt=""
                        />
                    </div>
                    <div class="middle">
                        <div class="title">
                            <div class="name">{{item.fundOperationsTypeName}}</div>
                            <div class="flag blue">拉卡拉</div>
                            <div class="flag grey">未领取</div>
                            <!-- <div class="flag orange">已发货</div> -->
                            <!-- <div class="flag red">已签收</div> -->
                        </div>
                        <div class="call">
                            <div>
                                <span>联系方式：</span>
                                <span>19147893890</span>
                            </div>
                            <img
                                src="../../../assets/img/daijika@1x.svg"
                                alt=""
                            />
                        </div>
                        <div class="item">
                            <span>快递公司：</span>
                            <span>京东快递</span>
                        </div>
                        <div class="item">
                            <span>快递单号：</span>
                            <span>JDVC25355571752</span>
                            <img
                                src="../../../assets/img/daijika@1x.svg"
                                alt=""
                            />
                        </div>
                        <div class="item">
                            <span>机具编码：</span>
                            <span>00003202C16251136665</span>
                            <img
                                src="../../../assets/img/daijika@1x.svg"
                                alt=""
                            />
                        </div>
                        <div class="item">
                            <div>
                                <span>订单时间：</span>
                                <span>2024-07-17 21:21</span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
            <van-empty v-else description="暂无内容" />
        </van-pull-refresh>

        <div v-else class="load">
            <van-loading color="#F53137" />
        </div>
    </div>
</template>

<script>
    export default {
        props: [], // 父辈向子辈传参
        name: 'order',
        components: { // 组件的引用

        },
        data() {
            return {
                size: 5,
                current: 1,
                loading: true,
                finished: false,
                refreshing: false,
                list: [],
                summary: {},
                loadData: true
            }
        },
        methods: {
            getList() {
                const { size, current } = this;
                this.$toast.clear()

                let params = {
                    size,
                    current,
                };
                // 删除空字符串参数
                for (let key in params) {
                    if (params[key] === "" || params[key] === null) {
                        delete params[key];
                    }
                }
                console.log("携带参数", params);

                console.log("refreshing", this.refreshing, this.finished);
                this.$api.app.walletListApi(params).then((res) => {
                    console.log("获取列表结果", res);
                    this.loadData = false
                    if (this.refreshing === true) {
                        // 下拉刷新
                        this.refreshing = false;
                        this.list = res.data.records
                        // this.loading = false;
                        if (this.list.length == res.data.total || res.data.records.length === 0) {
                            this.finished = true;
                        }
                    } else {
                        // 上拉加载
                        this.list = [...this.list, ...res.data.records];
                        this.loading = false;   // 加载状态结束
                        if (this.list.length == res.data.total || res.data.records.length === 0) {
                            this.finished = true;
                        }
                        this.loading = false
                    }
                }).catch((err) => {
                    console.log("err", err);
                    this.$toast(err.message)
                });
            },
            loadMore() {
                // 异步更新数据
                console.log("加载数据");
                if (this.refreshing) {
                    this.current = 1
                } else {
                    this.current++
                    this.getList();
                }
            },
            onRefresh() {
                this.refreshing = true
                this.finished = false
                this.current = 1
                this.getList()
            },
        },
        computed: {},
        watch: {},
        created() { },
        mounted() {
            this.getList()
         },
    }
</script>
    
<style scoped lang='scss'>
    .top {
        padding: 14px 14px 15px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            font-weight: 400;
            font-size: 12px;
            color: #1a1a1a;
            line-height: 12px;
            display: flex;
            align-items: center;
            & > div {
                margin-right: 16px;
            }
        }
        .right {
            font-weight: 400;
            font-size: 16px;
            color: #1d2129;
            line-height: 22px;
            display: flex;
            align-items: center;
            & > img {
                width: 18px;
                height: 18px;
                margin-left: 11px;
            }
        }
    }
    .list {
        min-height: 80vh;
        margin-top: 9px;

        .list-item {
            background: #ffffff;
            padding: 16px 16px 5px;
            box-sizing: border-box;
            border-bottom: 1px solid #e5e6eb;
            display: flex;
            justify-content: space-between;
            .avatar {
                font-size: 0;
                margin-right: 16px;
                & > img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
            }
            .middle {
                flex: 1;
                display: flex;
                flex-direction: column;
                font-weight: 400;
                font-size: 12px;
                color: #333;
                line-height: 12px;

                .title {
                    display: flex;

                    align-items: center;
                }
                .title div {
                    margin-right: 8px;
                }
                .name {
                    font-size: 16px;
                    color: #1d2129;
                    line-height: 16px;
                }
                .flag {
                    padding: 2px 4px;
                    font-weight: 400;
                    font-size: 10px;
                    line-height: 14px;
                    border-radius: 2px;
                    display: flex;
                    align-content: center;
                    justify-content: center;
                }
                .grey {
                    background: #f2f3f5;
                    color: #4e5969;
                }
                .blue {
                    color: #165dff;
                    background: #e8f3ff;
                }
                .orange {
                    color: #ff7d00;
                    background: #fff7e8;
                }
                .red {
                    color: #f53f3f;
                    background: #ffece8;
                }

                .call {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 2px;
                    & > img {
                        width: 24px;
                        height: 24px;
                    }
                }
                .item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 8px;
                    & > img {
                        width: 16px;
                        height: 16px;
                        margin-left: 8px;
                    }
                }
            }
        }
    }
    .load {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 90vh;
    }
    .van-empty {
        padding: 60px 0;
    }
</style>